<template>
	<view class="container">
		<!-- 顶部统计卡片 -->
		<view class="stats-card" :animation="cardAnimation">
			<view class="teacher-info">
				<text class="teacher-name">{{teacherName}}</text>
				<text class="teacher-id">ID: {{teacherId}}</text>
			</view>
			<view class="score-summary">
				<view class="score-item">
					<text class="score-label">今日得分</text>
					<text class="score-value">{{todayScore}}</text>
				</view>
				<view class="score-item">
					<text class="score-label">平均分</text>
					<text class="score-value">{{averageScore}}</text>
				</view>
				<view class="score-item">
					<text class="score-label">总分</text>
					<text class="score-value">{{totalScore}}</text>
				</view>
			</view>
		</view>

		<!-- 评分趋势图表 -->
		<view class="chart-scroll-container">
			<scroll-view class="chart-scroll-view" scroll-x :scroll-left="scrollLeft" @scroll="handleScroll">
				<view class="chart-wrapper" :style="{width: chartWidth + 'px'}">
					<qiun-data-charts type="line" :ontouch="true" :chartData="chartData" :canvas2d="true" />
				</view>
			</scroll-view>
			<view class="scroll-indicator" v-if="showScrollIndicator">
				<text>← 滑动查看 →</text>
			</view>
		</view>

		<!-- 教师排行榜 -->
		<view class="ranking-section">
			<view class="section-header">
				<text>教师总分排行榜</text>
				<view class="ranking-tabs">
					<text class="tab active">总分</text>
				</view>
			</view>

			<view class="ranking-container">
				<!-- 前三名特殊展示 -->
				<view class="top-three">
					<view class="top-item" v-for="(teacher, index) in topThreeTeachers" :key="index"
						:class="['rank-' + (index + 1)]">
						<view class="crown" v-if="index === 0">
							<image src="/static/crown.png" mode="aspectFit"></image>
						</view>
						<view class="medal" v-else-if="index < 3">
							<image :src="'/static/medal-' + (index + 1) + '.png'" mode="aspectFit"></image>
						</view>
						<image class="avatar" :src="getAvatarUrl(teacher.avatarUrl)" mode="aspectFill"></image>
						<view class="teacher-meta">
							<text class="name">{{teacher.name}}</text>
						</view>
						<view class="score-badge">
							<text>{{teacher.score}}</text>
						</view>
					</view>
				</view>

				<!-- 其他教师列表 -->
				<view class="other-teachers">
					<view class="teacher-item" v-for="(teacher, index) in otherTeachers" :key="index + 3">
						<text class="rank">{{index + 4}}</text>
						<image class="avatar" :src="getAvatarUrl(teacher.avatarUrl)" mode="aspectFill"></image>
						<view class="teacher-info">
							<text class="name">{{teacher.name}}</text>
						</view>
						<view class="progress-container">
							<view class="progress-bar" :style="{width: (teacher.score / maxTotalScore * 100) + '%'}">
							</view>
						</view>
						<text class="score">{{teacher.score}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 每日评分详情 - 优化版 -->
		<view class="daily-section">
			<view class="section-header">
				<text>每日评分详情</text>
				<view class="calendar-icon">
					<image src="/static/calendar.png" mode="aspectFit"></image>
				</view>
			</view>

			<view class="daily-list">
				<view class="daily-item" v-for="(day, date) in sortedDailyScores" :key="date"
					:animation="animations[date]" @click="toggleDayExpand(date)">
					<view class="date-header">
						<view class="date-info">
							<text class="day">{{formatDay(date)}}</text>
							<text class="date">{{formatMonthDay(date)}}</text>
							<text class="weekday">{{formatWeekday(date)}}</text>
						</view>
						<view class="daily-score-circle" :style="getScoreCircleStyle(day)">
							<text class="score-value">{{calculateDailyTotal(day)}}</text>
							<text class="score-total">/{{maxDailyScore}}</text>
						</view>
					</view>

					<view class="progress-container">
						<view class="progress-bar" :style="{
							width: (calculateDailyTotal(day) / maxDailyScore * 100) + '%',
							background: getProgressColor(calculateDailyTotal(day))
						}"></view>
					</view>

					<view class="score-details" v-if="expandedDays[date]">
						<view class="detail-item" v-for="(item, index) in day" :key="index"
							:animation="getItemAnimation(index)">
							<view class="category-container">
								<view class="category-icon" :style="{background: getCategoryColor(index)}">
									<image :src="getCategoryIcon(item.scoreName)" mode="aspectFit"></image>
								</view>
								<text class="category">{{item.scoreName}}</text>
							</view>
							<view class="score-badge">
								<text>{{item.score}}</text>
							</view>
						</view>
					</view>

					<view class="expand-indicator">
						<image :src="expandedDays[date] ? '/static/arrow-up.png' : '/static/arrow-down.png'"
							mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		globalVariable
	} from '../../configMy.js';
	export default {
		data() {
			return {
				teacherName: '',
				teacherId: '',
				maxDailyScore: 20, // 每日最高分
				maxTotalScore: 0, // 所有教师中的最高总分
				ratings: [],
				allTeachers: [], // 所有教师列表
				teacherRanking: [], // 教师总分排行榜
				cardAnimation: {},
				chartWidth: 700, // 基础宽度
				scrollLeft: 0,
				showScrollIndicator: false,
				chartData: {
					categories: [],
					series: [{
						name: "每日总分",
						data: []
					}]
				},
				expandedDays: {},
				animations: {},
				categoryIcons: {
					'课堂表现': 'class-performance.png',
					'作业完成': 'homework.png',
					'考试成绩': 'exam.png',
					'参与度': 'participation.png',
					// 其他评分项...
				}
			}
		},
		computed: {
			todayScore() {
				const today = new Date().toISOString().split('T')[0];
				const todayRatings = this.ratings.filter(item => item.timestamp === today);
				return todayRatings.reduce((sum, item) => sum + item.score, 0).toFixed(1);
			},
			averageScore() {
				if (this.ratings.length === 0) return '0.0';
				const sum = this.ratings.reduce((total, item) => total + item.score, 0);
				return (sum / this.ratings.length).toFixed(1);
			},
			totalScore() {
				return this.ratings.reduce((total, item) => total + item.score, 0).toFixed(1);
			},
			groupedDailyScores() {
				const groups = {};
				this.ratings.forEach(item => {
					const date = item.timestamp;
					if (!groups[date]) {
						groups[date] = [];
					}
					groups[date].push(item);
				});
				return groups;
			},
			// 前三名教师
			topThreeTeachers() {
				return this.teacherRanking.slice(0, 3);
			},
			// 其他教师
			otherTeachers() {
				return this.teacherRanking.slice(3);
			},
			// 按日期倒序排列
			sortedDailyScores() {
				const groups = this.groupedDailyScores;
				const sortedDates = Object.keys(groups).sort((a, b) => {
					return new Date(b) - new Date(a);
				});

				const result = {};
				sortedDates.forEach(date => {
					result[date] = groups[date];
				});
				return result;
			}
		},
		onLoad(e) {
			this.teacherName = e.teacherName || '';
			this.teacherId = e.teacherId || '';
			this.initAnimation();
			this.fetchAllTeachers();
		},
		methods: {
			getAvatarUrl(avatarUrl) {
				if (!avatarUrl || avatarUrl === 'null') {
					return '/static/aver2.jpg'; // 默认头像路径
				}
				return globalVariable + '/get/' + avatarUrl;
			},
			initAnimation() {
				const animation = uni.createAnimation({
					duration: 800,
					timingFunction: 'ease'
				});
				animation.translateY(0).opacity(1).step();
				this.cardAnimation = animation.export();
			},

			// 获取所有教师数据
			fetchAllTeachers() {
				uni.request({
					url: globalVariable + '/getAllTeachers',
					success: (res) => {
						if (res.data.status === 1) {
							this.allTeachers = res.data.data;
							this.fetchAllTeachersScores();
						}
					},
					fail: (err) => {
						console.error('获取教师列表失败:', err);
						uni.showToast({
							title: '获取教师列表失败',
							icon: 'none'
						});
					}
				});
			},

			// 获取所有教师的评分数据
			fetchAllTeachersScores() {
				const requests = this.allTeachers.map(teacher => {
					return new Promise((resolve) => {
						uni.request({
							url: globalVariable +
								`/getTeacherScoreByTeacherId?teacherId=${teacher.teacherId}`,
							success: (res) => {
								if (res.data.status === 1) {
									resolve({
										...teacher,
										scores: res.data.data
									});
								} else {
									resolve(null);
								}
							},
							fail: () => resolve(null)
						});
					});
				});

				Promise.all(requests).then(results => {
					const validResults = results.filter(item => item !== null);

					// 处理当前教师的评分数据
					const currentTeacher = validResults.find(item => item.teacherId.toString() === this.teacherId
						.toString());
					if (currentTeacher) {
						this.teacherName = currentTeacher.name;
						this.ratings = currentTeacher.scores;
						setTimeout(() => {
							this.prepareChartData();
						}, 800)
					}

					// 计算教师总分排行榜
					this.calculateTeacherRanking(validResults);
				});
			},

			// 计算教师总分排行榜
			calculateTeacherRanking(teachersData) {
				const ranking = teachersData.map(teacher => {
					const totalScore = teacher.scores.reduce((sum, item) => sum + item.score, 0);
					return {
						...teacher,
						score: parseFloat(totalScore.toFixed(1))
					};
				}).sort((a, b) => b.score - a.score);

				// 计算最高总分用于进度条比例
				this.maxTotalScore = ranking.length > 0 ? ranking[0].score : 0;

				this.teacherRanking = ranking;
			},

			prepareChartData() {
				// 按日期分组并计算每日总分
				const dateMap = {};
				this.ratings.forEach(item => {
					if (!dateMap[item.timestamp]) {
						dateMap[item.timestamp] = 0;
					}
					dateMap[item.timestamp] += item.score;
				});

				// 准备图表数据
				const chartCategories = [];
				const chartSeriesData = [];

				Object.keys(dateMap).sort().forEach(date => {
					chartCategories.push(this.formatChartDate(date));
					chartSeriesData.push(dateMap[date]);
				});

				// 根据数据量调整图表宽度（大于5个数据点时增加宽度）
				if (chartCategories.length > 5) {
					this.chartWidth = chartCategories.length * 80; // 每个数据点140px宽度
					this.showScrollIndicator = true;
				} else {
					this.chartWidth = 500;
					this.showScrollIndicator = false;
				}

				this.chartData = {
					categories: chartCategories,
					series: [{
						name: '每日总分',
						data: chartSeriesData,
						color: '#5B8FF9'
					}]
				};
			},

			handleScroll(e) {
				this.scrollLeft = e.detail.scrollLeft;
			},

			calculateDailyTotal(ratings) {
				return ratings.reduce((sum, item) => sum + item.score, 0).toFixed(1);
			},

			formatChartDate(dateStr) {
				const date = new Date(dateStr);
				return `${date.getMonth() + 1}/${date.getDate()}`;
			},
			
			// 新增的方法
			toggleDayExpand(date) {
				this.$set(this.expandedDays, date, !this.expandedDays[date]);
				this.initDayAnimation(date);
			},

			initDayAnimation(date) {
				const animation = uni.createAnimation({
					duration: 300,
					timingFunction: 'ease-out'
				});

				if (this.expandedDays[date]) {
					animation.scale(1).opacity(1).step();
				} else {
					animation.scale(0.98).opacity(0.9).step();
				}

				this.$set(this.animations, date, animation.export());
			},

			getItemAnimation(index) {
				const animation = uni.createAnimation({
					duration: 500,
					delay: index * 50,
					timingFunction: 'ease-out'
				});
				animation.translateX(0).opacity(1).step();
				return animation.export();
			},

			getScoreCircleStyle(day) {
				const total = this.calculateDailyTotal(day);
				const percentage = total / this.maxDailyScore;
				let color;

				if (percentage >= 0.8) {
					color = '#52c41a'; // 优秀-绿色
				} else if (percentage >= 0.6) {
					color = '#faad14'; // 良好-橙色
				} else {
					color = '#f5222d'; // 待提高-红色
				}

				return {
					background: `conic-gradient(${color} ${percentage * 360}deg, #f0f0f0 ${percentage * 360}deg 360deg)`,
					borderColor: color
				};
			},

			getProgressColor(total) {
				const percentage = total / this.maxDailyScore;
				if (percentage >= 0.8) return '#52c41a';
				if (percentage >= 0.6) return '#faad14';
				return '#f5222d';
			},

			getCategoryColor(index) {
				const colors = ['#5B8FF9', '#5BD8A6', '#F6BD16', '#F26969', '#7262FD'];
				return colors[index % colors.length];
			},

			getCategoryIcon(scoreName) {
				const defaultIcon = '/static/default-icon.png';
				const iconName = this.categoryIcons[scoreName] || 'default-icon.png';
				return `/static/${iconName}`;
			},

			formatDay(dateStr) {
				const date = new Date(dateStr);
				return date.getDate();
			},

			formatMonthDay(dateStr) {
				const date = new Date(dateStr);
				return `${date.getMonth() + 1}月${date.getDate()}日`;
			},

			formatWeekday(dateStr) {
				const date = new Date(dateStr);
				const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				return weekdays[date.getDay()];
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx;
		min-height: 100vh;
		background-image:
			radial-gradient(circle at 10% 20%, rgba(255, 79, 10, 0.1) 0%, transparent 20%),
			radial-gradient(circle at 90% 80%, rgba(38, 10, 255, 0.1) 0%, transparent 20%);
	}

	/* 顶部统计卡片 - 毛玻璃效果 */
	.stats-card {
		background: rgba(255, 255, 255, 0.25);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		border-radius: 24rpx;
		padding: 30rpx;
		margin-bottom: 40rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
		transform: translateY(60rpx);
		opacity: 0;
		position: relative;
		overflow: hidden;
		transition: all 0.2s ease;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(233, 92, 246, 0.2) 100%);
			z-index: -1;
		}

		&:active {
			transform: translateY(0) scale(0.98);
		}

		.teacher-info {
			margin-bottom: 30rpx;

			.teacher-name {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
				display: block;
			}

			.teacher-id {
				font-size: 24rpx;
				color: #666;
			}
		}

		.score-summary {
			display: flex;
			justify-content: space-between;

			.score-item {
				text-align: center;

				.score-label {
					font-size: 24rpx;
					color: #666;
					display: block;
					margin-bottom: 10rpx;
				}

				.score-value {
					font-size: 36rpx;
					font-weight: bold;
					color: #5B8FF9;
				}
			}
		}
	}

	.chart-scroll-container {
		margin-bottom: 30rpx;
		border-radius: 24rpx;
		overflow: hidden;
		background: rgba(255, 255, 255, 0.25);
		backdrop-filter: blur(10px);
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
		position: relative;
	}

	.chart-scroll-view {
		width: 100%;
		height: 400rpx;
		white-space: nowrap;
	}

	.chart-wrapper {
		height: 400rpx;
		display: inline-block;
		padding: 20rpx 0;
	}

	.scroll-indicator {
		position: absolute;
		bottom: 10rpx;
		left: 0;
		right: 0;
		text-align: center;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.5);
		animation: pulse 2s infinite;
	}

	@keyframes pulse {
		0% {
			opacity: 0.5;
		}

		50% {
			opacity: 1;
		}

		100% {
			opacity: 0.5;
		}
	}

	/* 新版排行榜样式 */
	.ranking-section {
		background: rgba(255, 255, 255, 0.25);
		backdrop-filter: blur(10px);
		border-radius: 24rpx;
		padding: 30rpx;
		margin-bottom: 40rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);

		.section-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;

			text {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}

			.ranking-tabs {
				display: flex;
				background: rgba(255, 255, 255, 0.6);
				border-radius: 40rpx;
				padding: 8rpx;

				.tab {
					padding: 8rpx 20rpx;
					font-size: 24rpx;
					color: #666;
					border-radius: 32rpx;

					&.active {
						background: #5B8FF9;
						color: white;
						font-weight: bold;
					}
				}
			}
		}

		.ranking-container {
			.top-three {
				display: flex;
				justify-content: space-around;
				align-items: flex-end;
				margin-bottom: 40rpx;
				padding: 0 20rpx;

				.top-item {
					position: relative;
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 200rpx;
					padding: 30rpx 20rpx;
					border-radius: 24rpx;
					background: rgba(255, 255, 255, 0.8);
					box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.1);

					.crown,
					.medal {
						position: absolute;
						top: -30rpx;
						width: 60rpx;
						height: 60rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.avatar {
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
						border: 4rpx solid white;
						margin-bottom: 20rpx;
						box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
					}

					.teacher-meta {
						display: flex;
						flex-direction: column;
						align-items: center;
						margin-bottom: 20rpx;

						.name {
							font-size: 28rpx;
							font-weight: bold;
							color: #333;
							margin-bottom: 8rpx;
						}
					}

					.score-badge {
						background: linear-gradient(135deg, #5B8FF9, #3A6FD9);
						color: white;
						padding: 8rpx 20rpx;
						border-radius: 20rpx;
						font-size: 26rpx;
						font-weight: bold;
					}

					&.rank-1 {
						height: 320rpx;
						background: linear-gradient(180deg, rgba(255, 215, 0, 0.2), rgba(255, 255, 255, 0.8));
						border: 2rpx solid rgba(255, 215, 0, 0.3);

						.score-badge {
							background: linear-gradient(135deg, #FFD700, #FFA500);
						}
					}

					&.rank-2 {
						height: 280rpx;
						background: linear-gradient(180deg, rgba(192, 192, 192, 0.2), rgba(255, 255, 255, 0.8));
						border: 2rpx solid rgba(192, 192, 192, 0.3);

						.score-badge {
							background: linear-gradient(135deg, #C0C0C0, #A0A0A0);
						}
					}

					&.rank-3 {
						height: 260rpx;
						background: linear-gradient(180deg, rgba(205, 127, 50, 0.2), rgba(255, 255, 255, 0.8));
						border: 2rpx solid rgba(205, 127, 50, 0.3);

						.score-badge {
							background: linear-gradient(135deg, #CD7F32, #A05A2C);
						}
					}
				}
			}

			.other-teachers {
				.teacher-item {
					display: flex;
					align-items: center;
					padding: 20rpx;
					margin-bottom: 20rpx;
					background: rgba(255, 255, 255, 0.8);
					border-radius: 16rpx;
					box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

					.rank {
						font-size: 28rpx;
						font-weight: bold;
						color: #666;
						width: 60rpx;
						text-align: center;
					}

					.avatar {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						margin-right: 20rpx;
						border: 2rpx solid white;
						box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
					}

					.teacher-info {
						flex: 1;
						display: flex;
						flex-direction: column;

						.name {
							font-size: 26rpx;
							font-weight: bold;
							color: #333;
							margin-bottom: 6rpx;
						}
					}

					.progress-container {
						flex: 1;
						height: 12rpx;
						background: #EEE;
						border-radius: 6rpx;
						margin: 0 20rpx;
						overflow: hidden;

						.progress-bar {
							height: 100%;
							background: linear-gradient(90deg, #5B8FF9, #3A6FD9);
							border-radius: 6rpx;
						}
					}

					.score {
						font-size: 26rpx;
						font-weight: bold;
						color: #5B8FF9;
						width: 100rpx;
						text-align: right;
					}
				}
			}
		}
	}

	/* 每日评分详情 - 优化版 */
	.daily-section {
		background: rgba(255, 255, 255, 0.25);
		backdrop-filter: blur(10px);
		border-radius: 24rpx;
		padding: 30rpx;
		margin-top: 40rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
		
		.section-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;
			
			text {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}
			
			.calendar-icon {
				width: 48rpx;
				height: 48rpx;
				
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		
		.daily-list {
			display: flex;
			flex-direction: column;
			gap: 24rpx;
		}
		
		.daily-item {
			background: rgba(255, 255, 255, 0.8);
			border-radius: 20rpx;
			padding: 30rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
			transition: all 0.3s ease;
			overflow: hidden;
			
			&:active {
				transform: scale(0.98);
			}
		}
		
		.date-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 24rpx;
		}
		
		.date-info {
			display: flex;
			align-items: center;
			gap: 20rpx;
			
			.day {
				font-size: 44rpx;
				font-weight: bold;
				color: #333;
				min-width: 60rpx;
			}
			
			.date {
				font-size: 28rpx;
				color: #666;
			}
			
			.weekday {
				font-size: 24rpx;
				color: #999;
				background: #f5f5f5;
				padding: 4rpx 12rpx;
				border-radius: 12rpx;
			}
		}
		
		.daily-score-circle {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			border: 4rpx solid;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			
			.score-value {
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
			}
			
			.score-total {
				font-size: 20rpx;
				color: #999;
			}
		}
		
		.progress-container {
			height: 12rpx;
			background: #f0f0f0;
			border-radius: 6rpx;
			margin-bottom: 30rpx;
			overflow: hidden;
			
			.progress-bar {
				height: 100%;
				border-radius: 6rpx;
				transition: width 0.6s ease, background 0.3s ease;
			}
		}
		
		.score-details {
			display: flex;
			flex-direction: column;
			gap: 20rpx;
			margin-top: 20rpx;
		}
		
		.detail-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			background: rgba(245, 245, 245, 0.5);
			border-radius: 16rpx;
			transform: translateX(-20rpx);
			opacity: 0;
			transition: all 0.3s ease;
			
			.category-container {
				display: flex;
				align-items: center;
				gap: 16rpx;
			}
			
			.category-icon {
				width: 48rpx;
				height: 48rpx;
				border-radius: 12rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				
				image {
					width: 28rpx;
					height: 28rpx;
				}
			}
			
			.category {
				font-size: 26rpx;
				color: #333;
			}
			
			.score-badge {
				background: rgba(91, 143, 249, 0.1);
				padding: 8rpx 16rpx;
				border-radius: 16rpx;
				font-size: 26rpx;
				font-weight: bold;
				color: #5B8FF9;
			}
		}
		
		.expand-indicator {
			display: flex;
			justify-content: center;
			margin-top: 20rpx;
			
			image {
				width: 32rpx;
				height: 32rpx;
				transition: transform 0.3s ease;
			}
		}
	}

	/* 动画效果 */
	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(20rpx);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.daily-item {
		animation: fadeInUp 0.5s ease forwards;
	}

	@for $i from 1 through 10 {
		.daily-item:nth-child(#{$i}) {
			animation-delay: $i * 0.1s;
		}
	}
</style>